import { useEffect } from 'react';


function useChartResize(boxRef, chartRef) {

  useEffect(() => {

    let isFirstTime = true
    // 创建一个 ResizeObserver 实例
    const resizeObserver = new ResizeObserver(entries => {

      if (isFirstTime) {
        // 首次进入不触发
        isFirstTime = false
        return
      }

      chartRef.current && chartRef.current.resize()
    })


    // 开始观察该元素
    resizeObserver.observe(boxRef.current);

    return () => {

      // boxRef元素的ref会是null
      // chartRef非空
      boxRef.current && resizeObserver.unobserve(boxRef.current)
      chartRef.current && chartRef.current.dispose()
      chartRef.current = null
      isFirstTime = null
    }
  }, [])
}

export default useChartResize